<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3_react生命周期(旧)_父组件render流程</title>
    <!-- 引入 react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入 react-dom 用于支持操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入 babel 用于将 jsx转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">

    class A extends React.Component {

        state = {
            carName: "奔驰"
        }

        changeCar = () => {
            this.setState({carName: "大众"});
        }

        render() {
            console.log("A === render");
            return (
                <div>
                    A
                    <button onClick={this.changeCar}>换车</button>
                    <B carName={this.state.carName} />
                </div>
            )
        }
    }

    class B extends React.Component {

        // 组件将要挂载的钩子
        componentWillMount() {
            console.log("组件将要挂载 === componentWillMount");
        }

        // 组件将要卸载的钩子
        componentWillUnmount() {
            console.log("组件将要卸载 === componentWillUnmount");
        }

        // 控制组件更新的 “阀门”
        shouldComponentUpdate() {
            console.log("组件是否将要被更新 === shouldComponentUpdate");
            return true;
        }

        // 组件将要更新的钩子
        componentWillUpdate() {
            console.log("组件将要被更新 === componentWillUpdate");
        }

        // 组件更新完毕的钩子
        componentDidUpdate() {
            console.log("组件更新完毕 === comonentDidUpdate");
        }

        // 组件将要接收新的props的钩子
        componentWillReceiveProps(props) {
            console.log(props);     // {carName: '大众'}
            console.log("B ==== componentWillReceiveProps");
        }

        // 组件挂载完毕的钩子
        componentDidMount() {
            console.log("B组件挂载完毕 === componentDidMount");
        }

        render() {
            console.log("B === render");
            return (
                <div>
                    我是B组件，接收到的车是 {this.props.carName}
                </div>
            )
        }
    }

    ReactDOM.render(<A />, document.getElementById("test"));

</script>
</body>
</html>